<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--[if lt IE 9]-->
    <script type="text/javascript" src="../../../../lib/html5shiv.js?rev=@@hash"></script>
    <script type="text/javascript" src="../../../../lib/respond.min.js?rev=@@hash"></script>
    <!--[endif]-->
    <link rel="stylesheet" type="text/css" href="../../../../static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../../static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="../../../../lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../../../../static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="../../../../static/h-ui.admin/css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../../../ht-css/Project.css" />
    <link rel="stylesheet" type="text/css" href="../../../../ht-css/style-q.css" />
    <!--[if IE 6]-->
    <script type="text/javascript" src="../../../../lib/DD_belatedPNG_0.0.8a-min.js?rev=@@hash"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <!--[endif]-->
    <title>活动专题图上传</title>
</head>
<body>
<nav class="breadcrumb">首页 <span class="c-gray en">&gt;积分管理 <span class="c-gray en">&gt;</span> <span onclick="returnVer()" style="cursor: pointer">积分商城</span><span class="c-gray en">&gt;</span> 积分活动管理&gt;</span> 活动专题图上传<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px ;display:block" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<article class="page-container">
    <form class="ml-20 mr-20" id="appVersionForm"  method="post">
        <div class="bk-gray bg-1 pd-20 text-c">
            <div class="va-m lh-20 f-14 pb-15">
                <strong style="margin-left: -304px;">PC端专题图：</strong>
            </div>
            <table class="table mt-10 col-2-1" style="margin-left: 35%">

                <tbody>

                <tr>
                    <td>
                        <div>
                            <label class="form-label f-l w-85 text-r lh-26">上传图片：</label>
                            <div class="ceshi pic_up" style="width: 84px;height: 84px;">
                                <img title=""  style="width: 84px;height: 84px;"  id="pcUrl" src="" class="myImg" class="mr-10">
                            </div>
                            <div class="pic_up_btn" style="margin-top: 10px">
                                <input value="{{=it.group_business_license_addr}}" id="fileUp1" style="display: none">
                                <input type="file" class="fileUp"  onchange="putDataToPage(event,this)" multiple="multiple" style="display: none">
                                </input>
                                <a class="btn btn-secondary radius size-S"  onclick="addBtn(this)" style="margin-left: -164px"><span id="pcxuan">选择图片</span></a>
                                <a class="btn btn-secondary radius size-S" style="display: none" id="deletapic1"  onclick="deletepic(this,1)"><span >删除图片</span></a>
                                <br> <span style="margin-left: -124px;">支持jpg、jpeg、png格式，不得超过1M</span>
                                <br> <span style="margin-left: -200px;">图片尺寸：1200px*282px</span>
                            </div>
                        </div>
                    </td>

                </tr>


                </tbody>
            </table>
            <div class="va-m lh-20 f-14 pb-15" style="margin-top: 76px;">
                <strong style="margin-left: -304px;">移动端专题图：</strong>
            </div>
            <table class="table mt-10 col-2-1" style="margin-left: 35%">

                <tbody>

                <tr>
                    <td>
                        <div>
                            <label class="form-label f-l w-85 text-r lh-26">上传图片：</label>
                            <div class="ceshi pic_up" style="width: 84px;height: 84px;">
                                <img title="" style="width: 84px;height: 84px;"  id="appUrl" src="" class="myImg" class="mr-10">
                            </div>
                            <div class="pic_up_btn" style="margin-top: 10px">
                                <input value="{{=it.group_business_license_addr}}" id="fileUp2" style="display: none">
                                <input type="file" class="fileUp"  onchange="putDataToPage2(event,this)" multiple="multiple" style="display: none">
                                </input>
                                <a class="btn btn-secondary radius size-S"  onclick="addBtn2(this)" style="margin-left: -164px"><span id="appxuan">选择图片</span></a>
                                <a class="btn btn-secondary radius size-S" style="display: none" id="deletapic2"  onclick="deletepic(this,2)"><span >删除图片</span></a>
                                <br> <span style="margin-left: -124px;">支持jpg、jpeg、png格式，不得超过1M</span>
                                <br> <span style="margin-left: -200px;">图片尺寸：750px*300px</span>
                            </div>
                        </div>
                    </td>

                </tr>


                </tbody>
            </table>
            <div class="text-c mt-10" style="margin-top: 82px;">
                <input type="button" class="btn btn-secondary radius size-S" value="提交" onclick="Submission()">
                <input type="button" class="btn radius size-S ml-10" value="返回" onclick="returnVer()">
            </div>
        </div>
    </form>


</article>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="../../../../lib/jquery/1.9.1/jquery.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../lib/layer/2.4/layer.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../static/h-ui/js/H-ui.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../static/h-ui.admin/js/H-ui.admin.js?rev=@@hash"></script> <!--/_footer 作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="../../../../lib/My97DatePicker/4.8/WdatePicker.js?rev=@@hash"></script>
<!--表单验证-->
<script type="text/javascript" src="../../../../lib/jquery.validation/1.14.0/jquery.validate.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../lib/jquery.validation/1.14.0/validate-methods.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../lib/jquery.validation/1.14.0/messages_zh.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../lib/datatables/1.10.0/jquery.dataTables.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../lib/laypage/1.2/laypage.js?rev=@@hash"></script>
<script src="../../../../ht-js/frame/doT.min.js?rev=@@hash"></script>
<script src="../../../../ht-js/public.js?rev=@@hash"></script>
<!--验证token-->
<script src="../../../../ht-js/verifyToken.js?rev=@@hash"></script>
<script src="../../../../ht-js/Project.js?rev=@@hash"></script>
<script src="../../../../ht-js/operation-js/operation_activity/activity_login.js?rev=@@hash"></script>
<script src="../../../../ht-js/contract/jquery-form.js?rev=@@hash"></script>

<link type="text/css" rel="stylesheet" href="../../../../ht-js/operation-js/time-js/jedate.css">
<script type="text/javascript" src="../../../../ht-js/operation-js/time-js/jquery.jedate.js?rev=@@hash"></script>
<script>
    var idall=""

    var pcPic=""//pc图片
    var appPic=""//app图片
    var caozuopc=0
    var caozuoapp=0

    searchIntegralResource()
    function searchIntegralResource() {
        $.ajax({
            url:root.integralManagement.searchIntegralResource,
            cache: false,  //禁用缓存
            type: "POST",
            dataType:'json',
            contentType: "application/json",
            data: JSON.stringify({

            }),
            success: function (data) {
                if(data.errorCode==0){
                    idall=data.data.id
                    if(data.data.picUrl!=""&&data.data.picUrl!=null){
                        $("#pcUrl").attr("src",data.data.picUrl)
                        $("#pcxuan").html("更换图片")
                        $("#deletapic1").css({
                            display: "inline"
                        });
                    }else {
                        $("#deletapic1").css({
                            display: "none"
                        });
                    }
                    if(data.data.appUrl!=""&&data.data.appUrl!=null){
                        $("#appUrl").attr("src",data.data.appUrl)
                        $("#appxuan").html("更换图片")
                        $("#deletapic2").css({
                            display: "inline"
                        });
                    }else {
                        $("#deletapic2").css({
                            display: "none"
                        });
                    }

                }
            },
            error: function () {
                $.Huimodalalert('失败！',2000);
            }
        })
    }

    //第一张图片。。。。。。。。。。。。。。。。。。。
    //触发事件

    function addBtn(cen) {
        $(cen).prev().trigger('click');
    }
    var formData = new FormData();
    // 提交上传图片
    function getupfilerul(can,e){
        var formData = new FormData();
        formData.append('file',$(can)[0].files[0]);
        // formData.append('file',$("#fileUp").files);
        console.log($(can)[0].files[0])
        console.log(formData)
        $.ajax({
            url: root.inter.imgUpload,
            cache: false,  //禁用缓存
            type: "POST",
            // 告诉jQuery不要去处理发送的数据
            processData : false,
            // 告诉jQuery不要去设置Content-Type请求头
            contentType : false,
            data: formData,
            success: function (data) {
                for(var i=0; i<data.length; i++){
                    $(can).prev().val(data[0].reletivePath)
                    $(can).prev().text(data[0].reletivePath)
                }
                caozuopc=1
                pcPic=data[0].fullPath
                $("#deletapic1").css({
                    display: "inline"
                });

            }
        })
    }
    // 上传图片返现
    function putDataToPage(e,can) {
        //验证
        verificationPicFileType(can)
        verificationPicFileSize(can)
        for(var i = 0; i < e.target.files.length; i++) {
            var file = e.target.files.item(i);
            if(!(/^image\/.*$/i.test(file.type))) {
                continue; //不是图片 就跳出这一次循环
            }
            //实例化FileReader API
            var freader = new FileReader();
            freader.readAsDataURL(file);
            freader.onload = function (e) {
                var data = e.target.result;
                //加载图片获取图片真实宽度和高度
                var img = new Image();
                img.src= data;
                img.onload = function(){
                    var width = img.width;
                    var height = img.height;
                    if (width != 1200 | height != 282){
                        $.Huimodalalert('图片尺寸限制为：1200px*282px',2000);
                        file.value = "";
                        return ;
                    }else {
                        $(can).parent().prev().children().attr("src", e.target.result);
                        $(can).next().text('更换图片')
                        getupfilerul(can,e)
                    }

                };


            }
        }
        formData.append('file', $(can)[0].files[0]);
    }



    //第二张图片。。。。。。。。。。。。。。。。。。。
    //触发事件

    function addBtn2(cen) {
        $(cen).prev().trigger('click');
    }
    var formData = new FormData();
    // 提交上传图片
    function getupfilerul2(can,e){
        var formData = new FormData();
        formData.append('file',$(can)[0].files[0]);
        // formData.append('file',$("#fileUp").files);
        console.log($(can)[0].files[0])
        console.log(formData)
        $.ajax({
            url: root.inter.imgUpload,
            cache: false,  //禁用缓存
            type: "POST",
            // 告诉jQuery不要去处理发送的数据
            processData : false,
            // 告诉jQuery不要去设置Content-Type请求头
            contentType : false,
            data: formData,
            success: function (data) {
                for(var i=0; i<data.length; i++){
                    $(can).prev().val(data[0].reletivePath)
                    $(can).prev().text(data[0].reletivePath)
                }
                caozuoapp=1
                caozuo2=1
                appPic=data[0].fullPath
                $("#deletapic2").css({
                    display: "inline"
                });

            }
        })
    }
    // 上传图片返现
    function putDataToPage2(e,can) {
        //验证
        verificationPicFileType(can)
        verificationPicFileSize(can)
        console.log($("#intro").val())
        for(var i = 0; i < e.target.files.length; i++) {
            var file = e.target.files.item(i);
            if(!(/^image\/.*$/i.test(file.type))) {
                continue; //不是图片 就跳出这一次循环
            }
            //实例化FileReader API
            var freader = new FileReader();
            freader.readAsDataURL(file);
            console.log(e.path)
            console.log(can)
            freader.onload = function (e) {
                var data = e.target.result;
                //加载图片获取图片真实宽度和高度
                var img = new Image();
                img.src= data;
                img.onload = function(){
                    var width = img.width;
                    var height = img.height;
                    if (width != 750 | height != 300){
                        $.Huimodalalert('图片尺寸限制为：750px*300px',2000);
                        file.value = "";
                        return ;
                    }else {
                        $(can).parent().prev().children().attr("src", e.target.result);
                        $(can).next().text('更换图片')
                        getupfilerul2(can,e)
                    }

                };

            }
        }
        formData.append('file', $(can)[0].files[0]);
    }




    // 企业logo
    /* jcrop对象，全局变量方便操作 */
    var api = null;
    /* 原图宽度 */
    var boundx;
    /* 原图高度 */
    var boundy;
    /* 选择图片事件 */
    function readURL(URL){
        var reader = new FileReader();
        reader.readAsDataURL(URL.files[0]);
        reader.onload = function(e){
            $("#faceId").removeAttr("src");
            $("#lookId").removeAttr("src");
            $("#faceId").attr("src",e.target.result);
            $("#lookId").attr("src",e.target.result);
            $("#faceId").Jcrop({
                setSelect: [ 20, 20, 200, 200 ],
                onChange: showPreview,
                onSelect: showPreview,
                aspectRatio: 1,
                boxWidth:600
            },function(){
                // Use the API to get the real image size
                //使用API来获得真实的图像大小
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];
                // Store the API in the jcrop_api variable
                //jcrop_api变量中存储API
                api = this;

                $("#boundx").val(boundx);
                $("#boundy").val(boundy);

            });
        };//简单的事件处理程序，响应自onChange,onSelect事件，按照上面的Jcrop调用
        function showPreview(coords){
            /* 设置剪切参数 */
            $("#x").val(coords.x);
            $("#y").val(coords.y);
            $("#w").val(coords.w);
            $("#h").val(coords.h);
            if(parseInt(coords.w) > 0){
                //计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到
                var rx = $("#preview_box").width() / coords.w;
                var ry = $("#preview_box").height() / coords.h;
                $("#lookId").css({
                    width:Math.round(rx * $("#faceId").width()) + "px",    //预览图片宽度为计算比例值与原图片宽度的乘积
                    height:Math.round(rx * $("#faceId").height()) + "px",  //预览图片高度为计算比例值与原图片高度的乘积
                    marginLeft:"-" + Math.round(rx * coords.x) + "px",
                    marginTop:"-" + Math.round(ry * coords.y) + "px"
                });
            }
        }
    }


    // 图片类型验证
    function verificationPicFileType(file) {
        var flag=false;
        var fileTypes = [".jpg", ".png",".jpeg"];
        var filePath = file.value;
        //当括号里面的值为0、空字符、false 、null 、undefined的时候就相当于false
        if(filePath){
            var isNext = false;
            var fileEnd = filePath.substring(filePath.indexOf("."));
            for (var i = 0; i < fileTypes.length; i++) {
                if (fileTypes[i] == fileEnd) {
                    isNext = true;
                    flag= true;
                    break;
                }
            }
            if (!isNext){
                $.Huimodalalert('图片格式现在jpg、jpeg、png',2000);
                file.value = "";
                flag=false;
            }
        }
        return flag;
    }
    //图片大小验证
    function verificationPicFileSize(file) {
        var flag=false;
        var fileSize = 0;
        var fileMaxSize = Number(1024);
        var filePath = file.value;
        if(filePath){
            fileSize =file.files[0].size;
            var size = fileSize / Number(1024);
            if (size > fileMaxSize) {
                $.Huimodalalert('图片大小限制不能超过1M',2000);
                file.value = "";
                flag=false;
            }else{
                flag=true;
            }
        }
        return flag;
    }

    //删除
    function deletepic(can,id) {
        if(id==1){
            //PC
            if(caozuopc==1){
                //操作选中图片是=时
                $(can).parent().prev().children().attr("src","" )
                pcPic=""
            }else {
                $("#pcUrl").attr("src","")
            }
        }else {
            //APP
            if(caozuopc==1){
                //操作选中图片是=时
                $(can).parent().prev().children().attr("src","" )
                appPic=""
            }else {
                $("#appUrl").attr("src","")
            }
        }



    }
    //返回
    function returnVer(){
        var curInd = layer.confirm(
            '<span>是否保存</span>'+'<br/>', {title:'提示',btn: ['确定', '取消']}, function(index){
                Submission()

            },function(){
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
                layer.close(curInd);

            });

    }



    //提交
    function Submission() {
        var pcs=""
        var apps=""
            if(caozuopc==1){
                //操作选中图片是=时
                pcs=pcPic
            }else {
                pcs=$("#pcUrl").attr("src")
            }
        if(caozuoapp==1){
            //操作选中图片是=时
            apps=appPic
        }else {
            apps=$("#appUrl").attr("src")
        }
        if(pcs==""){
            pcs=""
        }
        if(apps==""){
            apps=""
        }
        $.ajax({
            url:root.integralManagement.addIntegralResource,
            cache: false,  //禁用缓存
            type: "POST",
            dataType:'json',
            contentType: "application/json",
            data: JSON.stringify({
                "id":idall,
                "picUrl":pcs,
                "appUrl":apps,
            }),
            success: function (data) {
                if(data.errorCode==0){
                    layer.msg("提交成功",{icon: 6,time:1000},function () {
                        var index =  parent.location.reload();
                        parent.layer.close(index);
                    });
                }else {
                    $.Huimodalalert(data.msg,2000)
                }
            },
            error: function () {
                $.Huimodalalert('失败！',2000);
            }
        })
    }

</script>
</body>
</html>